<template>
    <div style="padding: 20px 100px">
        <div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-button type="primary" plain>切换至无感极速匹配</el-button>
                    <el-button type="primary">导入数据</el-button>
                    <el-button type="primary">模板下载</el-button>
                </el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6">
                    <el-button type="primary">保存</el-button>
                    <el-button type="primary">匹配</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 20px">
            <span class="bold-larger-text">基本情况</span>
            <div>
                <table style="margin: 20px 0">
                    <tr>
                        <td class="table-td" colspan="1" style="width: 250px">公司名称</td>
                        <td colspan="3">
                            <div class="flex-container">
                                <el-select v-model="selectedCompany" placeholder="请选择您管理的企业进行匹配" style="width: 90%">
                                    <el-option v-for="item in companyOptions" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" class="right-aligned-button">添加企业</el-button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">注册地</td>
                        <td>
                            <el-input disabled placeholder="广东省／深圳市／龙华区" />
                        </td>
                        <td class="table-td" style="width: 250px">注册资金</td>
                        <td>
                            <el-input disabled placeholder="1000万元" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">经济区</td>
                        <td>
                            <el-select disabled v-model="selectedCompany" placeholder="请选择" style="width: 100%">
                                <el-option v-for="item in companyOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                        <td class="table-td">企业估值</td>
                        <td>
                            <el-input disabled placeholder="1000万元" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">成立时间</td>
                        <td><el-input disabled placeholder="选择时间" /></td>
                        <td class="table-td">国家高新</td>
                        <td>
                            <el-input disabled placeholder="1000万元" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">产业类别</td>
                        <td colspan="3">
                            <el-select disabled v-model="selectedCompany" placeholder="请选择" style="width: 100%">
                                <el-option v-for="item in companyOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">产品/服务关键词</td>
                        <td colspan="3">
                            <el-input disabled placeholder="请输入"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">企业资质</td>
                        <td colspan="3">
                            <el-select disabled v-model="selectedCompany" placeholder="请选择" style="width: 100%">
                                <el-option v-for="item in companyOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">企业人数</td>
                        <td>
                            <el-input disabled placeholder="1990" />
                        </td>
                        <td class="table-td">研发人员数</td>
                        <td>
                            <el-input disabled placeholder="70" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">高级职称人数</td>
                        <td>
                            <el-input disabled placeholder="50" />
                        </td>
                        <td class="table-td">博士学位人数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">中级职称人数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                        <td class="table-td">硕士学位人数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">本科学历人数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                        <td class="table-td">大专学历人数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">大专以下人数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                        <td class="table-td">参与标准数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">留学归国人数</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                        <td class="table-td">产学研合作学校（数量）</td>
                        <td>
                            <el-input disabled placeholder="0" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">办公场所面积(m²)</td>
                        <td>
                            <el-input disabled placeholder="请输入" />
                        </td>
                        <td class="table-td">研发场所面积(m²)</td>
                        <td>
                            <el-input disabled placeholder="请输入" />
                        </td>
                    </tr>
                    <tr>
                        <td class="table-td">备注</td>
                        <td>
                            <el-input disabled placeholder="请输入" />
                        </td>
                        <td colspan="2"></td>
                    </tr>
                </table>
            </div>

            <spna class="bold-larger-text">财务情况(万元)</spna>
            <div>
                <el-table :data="tableData" border style="width: 100%;margin: 20px 0px" stripe>
                    <el-table-column prop="type" label="项目类别" />
                    <el-table-column prop="year1" label="2023" />
                    <el-table-column prop="year2" label="2022" />
                    <el-table-column prop="year3" label="2021" />
                </el-table>
            </div>

            <spna class="bold-larger-text">投资情况(万元)</spna>
            <div>
                <el-table :data="tableData1" border style="width: 100%;margin: 20px 0" stripe>
                    <el-table-column prop="type" label="项目类别" />
                    <el-table-column prop="year1" label="2023" />
                    <el-table-column prop="year2" label="2022" />
                    <el-table-column prop="year3" label="2021" />
                </el-table>
            </div>

            <span class="bold-larger-text">知识产权</span>
            <div>
                <el-table :data="tableData2" border style="width: 100%;margin: 20px 0" stripe>
                    <el-table-column prop="type" label="项目类别" />
                    <el-table-column prop="year1" label="2023" />
                    <el-table-column prop="year2" label="2022" />
                    <el-table-column prop="year3" label="2021" />
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ref } from 'vue';
import { ElSelect, ElOption, ElButton } from 'element-plus';

const selectedCompany = ref('');
const companyOptions = ref([
    { value: 'companyA', label: '公司A' },
    { value: 'companyB', label: '公司B' },
    // 添加更多选项...
]);

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}

const tableData = [
    {
        type: '资产总额',
        year1: '5000',
        year2: '4000',
        year3: '1200'
    },
    {
        type: '销售收入',
        year1: '5000',
        year2: '4000',
        year3: '1200'
    },
    {
        type: '销售收入增长率',
        year1: '100%',
        year2: '-37%',
        year3: '-'
    },
    {
        type: '其中：属于自建网络平台的销售收入',
        year1: '0',
        year2: '0',
        year3: '0'
    },
    {
        type: '利润总',
        year1: '3000',
        year2: '2000',
        year3: '1000'
    },
    {
        type: '净利润',
        year1: '0',
        year2: '0',
        year3: '0'
    },
]
const tableData1 = [
    {
        type: '资产投入',
        year1: '0',
        year2: '0',
        year3: '0'
    },
    {
        type: '信息化投入',
        year1: '0',
        year2: '0',
        year3: '0'
    },
    {
        type: '生产管理软件',
        year1: '0',
        year2: '0',
        year3: '0'
    },
    {
        type: '其中：属于自建网络平台的销售收入',
        year1: '0',
        year2: '0',
        year3: '0'
    },
    {
        type: '办公自动化软件',
        year1: '0',
        year2: '0',
        year3: '0'
    },
    {
        type: '电脑设备',
        year1: '0',
        year2: '0',
        year3: '0'
    },
]
const tableData2 = [
    {
        type: '知识产权',
        year1: '100',
        year2: '60',
        year3: '20'
    },
    {
        type: '专利',
        year1: '20',
        year2: '10',
        year3: '10'
    },
    {
        type: '发明专利',
        year1: '10',
        year2: '10',
        year3: '0'
    },
    {
        type: '实用新型专利',
        year1: '10',
        year2: '2',
        year3: '3'
    },
    {
        type: '外观专利',
        year1: '0',
        year2: '0',
        year3: '0'
    },
    {
        type: '软件著作权',
        year1: '80',
        year2: '50',
        year3: '30'
    },
]
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.bold-larger-text {
    font-weight: bold;
    font-size: 20px;
    /* 或者使用其他单位，如 larger, 1.5em 等 */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #cacaca;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.table-td {
    text-align: center;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right-aligned-button {
    margin-left: auto;
    /* 使按钮靠右对齐 */
}
</style>
